<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>宠爱有家店铺管理系统</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jsrender.js"></script>
    <script src="js/jsrender.min.js"></script>
<style>
.city-picker-span { width:300px;}
.modal-row{
    margin-top: 30px;
}
</style>
</head>

<body>
<div class="headiv" style="background: #000000;">
	<div class="logotag">
       <h1>
       	<font size="" color="white">宠爱有家店铺管理</font>
       </h1>
        <b class="line"></b>
    </div>
    
    
</div>

<div class="messagebox">
	<div class="messageleft">
        <ul class="Fstage">
            <li><a href="#">店铺管理<div class="clear"></div></a>
                <ul class="Tstage" >
                    <li><a href="账号管理.html">账号管理</a></li>
					<li><a href="上架新品.html">上架新品</a></li>
                    <li><a href="物流详情.html">物流详情</a></li>
                    <li><a href="订单详情.html">历史订单</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="messageright">
    	<div class="formpage">
        	<div class="clear" style="height:20px"></div>
        	<h2>历史订单记录

            </h2>
            <div class="clear" style="height:30px"></div>
          	
            <span class="information">
            	<div class="clear" style="height:10px"></div>
            	
                <form class="datable">
                    <table width="100%" border="1" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th width="30%">订单编号</th>
                                <th width="10%">买家姓名</th>
                                <th width="10%">实付款</th>
                                <th width="10%">下单时间</th>
                                <th width="10%">收货时间</th>
                                <th width="20%">联系方式</th>
                                <th width="10%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="lishi-list">

                        </tbody>
                    </table>
                </form>
                <div class="clear"></div>
            </span>
            <div class="clear" style="height:50px"></div>
           
            
        </div>
    </div>
    <div class="clearh" style="height:0"></div>
</div>


<!--弹出新增层-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"><text>历史订单</text></h4>
                <input type="hidden" id="order-id" value="">
            </div>
            <div class="modal-body">
                <div class="row modal-row">
                    <div class="col-md-6">
                        <label for="orderID">订单编号(不可修改)</label>
                        <div class="input-group">

                            <input type="text" class="form-control" value="" disabled id="orderID">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="buyers-name">买家姓名(不可修改)</label>
                        <div class="input-group">
                            <input type="text" class="form-control" value="" disabled id="buyers-name">
                        </div>
                    </div>
                </div>
                <div class="row modal-row">
                    <div class="col-md-6">
                        <label for="payment">实付款(￥)</label>
                        <div class="input-group">

                            <input type="text" class="form-control" value=""disabled id="payment">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="date">下单时间</label>
                        <div class="input-group">
                            <input type="text" class="form-control" value="" disabled id="date">
                        </div>
                    </div>
                </div>
                <div class="row modal-row">
                    <div class="col-md-6">
                        <label for="end-date">收货时间</label>
                        <div class="input-group">

                            <input type="text" class="form-control" value=""disabled id="end-date">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="buyers-tel">联系方式(不可修改)</label>
                        <div class="input-group">

                            <input type="text" class="form-control" value="" disabled id="buyers-tel">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>


<script id="testTmpl" type="text/x-jsrender">
<tr>
    <td>订单号:{{:orderID}} </td>
    <td>{{:buyers}}</td>
    <td>￥{{:payment}}</td>
    <td>{{:date}}</td>
    <td>{{:end_date}}</td>
    <td>{{:tel}}</td>
    <td><a class="dolink" onclick="editOrder({{:id}})" href="#">修改</a></td>
</tr>
</script>

<script>

    var data = [{
        id:1001,
        orderID:'6265506578268338',
        buyers:'张三',
        payment:'1760',
        status:'待收货',
        date:'2019-09-25',
        end_date:'',
        tel:'137****6785',
    },{
        id:1002,
        orderID:'6265506578268337',
        buyers:'李四',
        price:'456',
        quantity:1,
        payment:'456',
        status:'交易成功',
        date:'2019-09-15',
        end_date:'2019-09-20',
        tel:'131****4679',

    },{
        id:1003,
        orderID:'6265506578268333',
        buyers:'王二',
        price:'128',
        quantity:10,
        payment:'1280',
        status:'交易成功',
        date:'2019-08-25',
        end_date:'2019-08-29',
        tel:'158****6527',

    },{
        id:1004,
        orderID:'6265506578268331',
        buyers:'周五',
        price:'99.99',
        quantity:1,
        payment:'99.99',
        status:'交易取消',
        date:'2019-08-01',
        end_date:'',
        tel:'176****1996',

    }];
    var html = $("#testTmpl").render(data);
    $("#lishi-list").append(html);

function callback() {
	
		$('body').append('<div id="mask"></div>');
		$('#mask').fadeIn();
		$('.popbox').css('display', 'block');
	}

    function editOrder(e) {
        for(var i = 0;i<data.length;i++){
            if(e == data[i].id){
                $('#myModal').modal('show');
                $('#orderID').val(data[i].orderID);
                $('#buyers-name').val(data[i].buyers);
                $('#buyers-tel').val(data[i].tel);
                $('#end-date').val(data[i].end_date);
                $('#payment').val(data[i].payment);
                $('#date').val(data[i].date);
            }
        }
    }


</script>
